<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { apiBrokerageInfo } from "@/apis/withdraw";
import dayjs from "dayjs";
import { router } from "@/utils/tools";
const detail = reactive({});

const getDetail = async () => {
  let res = await apiBrokerageInfo({ id: detail.id });

  Object.assign(detail, res.data);

};
onLoad((options: any) => {
  detail.id = options.id;
  getDetail();
});
const bankCardNumber = computed(() => {
  if (!detail.bankCardNumber) return "";
  return detail.bankCardNumber.slice(-4);
});
const createTime = computed(() => {
  return detail.createTime
    ? dayjs(detail.createTime).format("YYYY年MM月DD日 HH:mm:s")
    : "";
});
const updateTime = computed(() => {
  return detail.updateTime
    ? dayjs(detail.updateTime).format("YYYY年MM月DD日 HH:mm:s")
    : "";
});
</script>

<template>
  <view class="withdrawal_details">
    <view class="img-box margin-bottom">
      <image src="@/static/images/earnings.png" />
    </view>
    <view class="title margin-bottom">收益提现-到{{ detail.carBlank }}（{{ bankCardNumber }}）</view>
    <view class="earnings-text">{{ detail.brokerage }}</view>
    <view class="dotted-line"></view>
    <view> </view>
    <view class="dotted-line"></view>
    <view class="step">
      <uv-steps :current="detail.status" direction="column">
        <uv-steps-item title="发起提现" :desc="createTime"></uv-steps-item>
        <!-- <uv-steps-item title="银行处理中" desc=""></uv-steps-item> -->
        <uv-steps-item v-if="detail.status !== 0" :title="detail.status == 1 ? '提现成功' : '提现失败'"
          :desc="updateTime"></uv-steps-item>
      </uv-steps>
    </view>

    <view class="dotted-line"></view>
    <view class="bto-box">
      <view class="li-info">
        <text class="li-title">提现金额</text>
        <text> {{ detail.brokerage }}</text>
      </view>
      <view class="li-info">
        <text class="li-title">佣金费用</text>
        <text>{{ detail.commission ?? 0 }}</text>
      </view>
      <!-- <view class="li-info">
        <text class="li-title">到账金额</text>
        <text>{{ detail.account }}</text>
      </view> -->
      <view class="li-info" v-if="detail.status == 2" style="color: red">
        <text class="li-title">转账失败</text>
        <text>{{ detail.reason }}</text>
      </view>
      <!-- <view class="li-info">
        <text class="li-title">佣金费用</text>
        <text>{{ detail.commission }}</text>
      </view> -->
      <view class="li-info">
        <text class="li-title">申请时间</text>
        <text>{{
          detail.createTime
            ? dayjs(detail.createTime).format("YYYY年MM月DD日 HH:mm:s")
            : ""
        }}</text>
      </view>
      <view class="li-info">
        <text class="li-title">到账时间</text>
        <text>{{
          detail.updateTime
            ? dayjs(detail.updateTime).format("YYYY年MM月DD日 HH:mm:s")
            : ""
        }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: rgba(255, 255, 255, 1);
}

.withdrawal_details {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 30px;
  box-sizing: border-box;

  .margin-bottom {
    margin-bottom: 10px;
  }

  .img-box {
    image {
      width: 80px;
      height: 80px;
    }
  }

  .title {
    color: rgba(51, 51, 51, 1);
    font-size: 16px;
  }

  .earnings-text {
    margin-bottom: 29px;
    color: rgba(51, 51, 51, 1);
    font-size: 32px;
  }

  .dotted-line {
    width: 100%;
    border-bottom: 1px dashed rgba(187, 187, 187, 1);
  }

  .step {
    padding: 20rpx;
  }

  .bto-box {
    width: 100%;
    margin-top: 20px;

    .li-info {
      margin-bottom: 6px;

      text {
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
      }

      .li-title {
        margin-right: 20px;
        color: rgba(154, 154, 154, 1);
      }
    }
  }
}
</style>
